<%--
  Created by IntelliJ IDEA.
  User: jia
  Date: 2018/4/23
  Time: 11:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <!--可以省略版本号-->
    <script type="text/javascript" src='webjars/jquery/1.11.1/jquery.js'></script>
    <script type="text/javascript" src='webjars/sockjs-client/1.0.2/sockjs.min.js'></script>
    <script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel='stylesheet' href='<%=basePath%>webjars/bootstrap/3.3.5/css/bootstrap.min.css'>
    <title>Title</title>

</head>
<body>
<button id="stop">Stop</button>
<%--basePath:&nbsp;&nbsp;&nbsp;<%=basePath%><br>
${ctx}<br>
${pageContext.request.contextPath}--%>
<div id="message"></div>
<script type="text/javascript">
    var url='${ctx}/marco';
    var sock = new SockJS(url);

    //建立连接时
    sock.onopen = function() {
        alert("opening!")
        sayMarco();
    }
    /**
     * 接收消息时
     * @param e
     */
    sock.onmessage = function(e) {
        $('#message').append('Received "' + e.data + '"<br/>');
        setTimeout(function(){sayMarco()}, 2000);
    }

    /**
     * 关闭连接时
     */
    sock.onclose = function() {
        alert("closing")
    }

    function sayMarco() {
        var message="你好服务器！";
        $('#message').append('send:'+message+'<br/>');
        sock.send(message);
    }

    $('#stop').click(function() {sock.close()});
</script>
</body>
</html>
